<template>
	<view class="page">
		<u-navbar title="充值" border @leftClick="$utils.back()" placeholder />
		<view class="body viewWidth">
			<view class="balance" @click="jump">
				<view>
					<u--text mode="price" :text="user.account?user.account:0" color='#fff'></u--text>
				</view>
				<view>
					可用余额
				</view>
			</view>
			<view class="chooseBox">
				<view v-for="(item,index) in list" :key="item" @click="select(index)"
					:class="{'choose':item==chooseItem}">
					<view class="checkbox" v-if="item==chooseItem">
						<u-icon color='green' name="checkbox-mark"></u-icon>
					</view>
					<u--text v-if='index!=5' mode="price" :text="item" align='center'></u--text>
					<u--input v-else inputAlign='center' placeholder="其他额度" border="none" v-model="input" type='number'
						:focus='item==chooseItem'></u--input>
				</view>
			</view>
		</view>
		<view class="viewWidth but" @click="Recharge">
			立即充值
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				user: uni.getStorageSync('user'),
				input: null,
				chooseItem: 30,
				list: ['30', '50', '100', '300', '500', '其他额度'],
				loading: true,
				openid: uni.getStorageSync('openid')
			}
		},
		methods: {
			jump() {
				this.$utils.navigateTo({
					url: '/My/balance'
				})
			},
			select(index) {
				this.chooseItem = this.list[index]
			},
			Recharge() {
			
				
			
				if (this.chooseItem == '其他额度' && !this.input) {
					uni.$u.toast('请先输入额度')
					return
				}
				if (this.chooseItem == '其他额度' && this.input<1) {
					uni.$u.toast('金额不能小于1')
					return
				}
				if (this.disabled) return
				this.disabled = true
				uni.showLoading({
					title:'订单生成中...'
				})
				this.$api.Recharge.Recharge({
					charge: this.chooseItem == '其他额度' ? this.input : this.chooseItem
				}).then(res => {
					this.Payment(res.data)
				}).catch(err => {
					uni.hideLoading()
					uni.$u.toast(err.data.message)
					this.disabled = false
				})
			},
			Payment(data) {
				this.$api.Recharge.Payment({
					order_id: data.order_id,
					openid: this.openid
				}).then(res => {
					uni.hideLoading()
					this.showCode(res.data)
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
					uni.$u.toast(err.data.message)
					this.disabled = false
				})
			},
			showCode(data) {
				uni.requestPayment({
					provider: "wxpay",
					appid: data.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					nonceStr: data.nonceStr, // 随机字符串
					package: data.package, // 固定值
					prepayId: data.package.substring(10), // 统一下单订单号 
					timeStamp: data.timeStamp, // 时间戳（单位：秒）
					signType: data.signType, // 签名，这里用的 MD5/RSA 签名
					paySign: data.paySign,
					success:(res)=> {

						if (this.chooseItem == '其他额度') {
							this.user.account = ~~this.user.account + ~~this.input
							setTimeout(() => {
								uni.reLaunch({
									url: '/My/success?charge=' + this.input
								})
							}, 500)
						} else {
							this.user.account = ~~this.user.account + ~~this.chooseItem
							setTimeout(() => {
								uni.reLaunch({
									url: '/My/success?charge=' + this.chooseItem
								})
							}, 500)
						}
						uni.setStorageSync('user', this.user);

					},
					fail:(e)=> {
						this.disabled = false
						uni.$u.toast('取消付款')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0rpx 20rpx;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.body {
		flex: 1;
		overflow: hidden;
	}

	.balance {
		background: linear-gradient(to top, #42538E, #4a5df1);
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		margin-top: 20rpx;
		height: 300rpx;
		color: #fff;
		padding: 50rpx 0;
		box-sizing: border-box;
	}

	.chooseBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		>view {
			width: 32%;
			height: 200rpx;
			margin-top: 20rpx;
			border-radius: 8rpx;
			border: 1rpx solid #4a5df1;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
		}
	}

	.choose {
		border-color:#ddd !important;
	}

	.but {
		border-radius: 100rpx;
		background-color: #ddd;
		text-align: center;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.checkbox{
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}
</style>